<template>
  <!-- https://vue3js.cn/vue-composition-api/ -->
  <h1>vue3 组合式API</h1>
  <div>{{ count }}
    <button @click="addCount">加1</button>
  </div>
  <div>{{ obj.userName }} - {{ obj.age }}</div>
  <div>{{ arr1 }} ---- {{ len }}</div>
  <div>{{ arr2 }}</div>
  <Child />
</template>

<script lang="ts">
import ThemeSymbol from './ProInje'
import Child from './Child.vue'
import { computed, provide, reactive, ref, watch, watchEffect } from 'vue'
// import Vue from 'vue'
export default {
  components: {
    Child
  },
  setup () {
    provide(ThemeSymbol, '1111')
    // 定义了一个初始化的变量
    // ref 接收参数并将其包裹在一个带有 value property 的对象中返回，
    // 然后可以使用该 property 访问或更改响应式变量的值：
    const count = ref(10)
    const addCount = function () {
      console.log(count)// { value: 10 }
      count.value += 1
    }
    watchEffect(() => {
      console.log(count.value)
    })
    watch(count, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    const obj = reactive({ userName: '吴大勋', age: '18' })

    const arr1 = ref([1, 2, 3])
    const arr2 = reactive([4, 5, 6])

    const len = computed(() => {
      return arr1.value.length
    })

    return {
      count,
      addCount,
      obj,
      arr1,
      arr2,
      len
    }
  }
}
</script>

<style lang="stylus">

</style>
